<template>
    <Echart :option="option"></Echart>
</template>

<script setup>
import Echart from './echart.vue';
import { data } from '@/assets/img/yz';
var allnum = 0;
var arr = [
    {
        name: "政务信息",
        value: 3500,
        bfb: "35%"
    },
    {
        name: "政法信息",
        value: 1500,
        bfb: "20%"
    },
    {
        name: "检察信息",
        value: 1500,
        bfb: "20%"
    },
    {
        name: "社会信息",
        value: 1000,
        bfb: "15%"
    }
];
arr.forEach(val => {
    allnum += parseInt(val.value);
});
const option = {
    animation: true,
    legend: {
        top: "center",
        right: '30',
        orient: "vertical",
        data: arr.map(item => item.name),
        textStyle: {
            color: "#ffffff",
        },
    },
    grid: {
        top: '0',
        right: '0',
        bottom: '0',
        left: '0',
    },
    series: [
        {
            type: "pie",
            center: ["25%", "50%"],
            radius: ["50%", "70%"],
            color: ["#53fde6", "#5391fd", "#83fd53", "#7f71ff"],
            startAngle: 135,
            label: {
                normal: {
                    show: false
                }
            },
            data: arr
        }
    ],
    graphic: [
        {
            type: 'group',
            left: '19%',
            top: '35%',
            children: [
                {
                    type: 'image',   //添加图片
                    style: {         //设置图片样式
                        image: data,
                        width: 40,
                        height: 40
                    },
                    left: 'center',      //设置图片位置
                    top: '20'
                },
                {
                    type: 'text',
                    style: {
                        text: '业主关怀',
                        textAlign: 'center',
                        fill: '#5391fd',
                    }
                }
            ]
        }
    ]
};
</script>

<style scoped lang="scss"></style>